<div *ngIf="isLoading" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:rgba(0,0,0,0.2); z-index: 99999;">
	<mat-progress-bar mode="indeterminate" color="warn" style="position: absolute; top: 0px; left: 0px; right: 0px; z-index: 99999;">
	</mat-progress-bar>
</div>
<mat-sidenav-container class="sidenav-container">
	<mat-sidenav #matsidenav *ngIf="showSidenav" class="sidenav" [mode]="showSidenav">
		<app-sidenav #sidenav [sidenav]="matsidenav" (goToPage)="onGoToPage($event)" (goToLink)="onGoToLink($event)"></app-sidenav>
	</mat-sidenav>
	<mat-sidenav-content [style.background-color]="backgroudColor">
		<div class="header">
			<button mat-icon-button *ngIf="showSidenav && showSidenav !== 'side'" (click)="(matsidenav.opened) ? matsidenav.close() : matsidenav.open()" class="sidenav-toogle">
				<mat-icon aria-label="Menu">menu</mat-icon>
			</button>
			<div class="header-title">
				{{title}}
			</div>
			<div *ngIf="securityEnabled" style="float: right; line-height: 46px;">
				<button mat-icon-button (click)="onLogin()">
					<mat-icon aria-label="Login" [style.color]="isLoggedIn() ? 'rgb(59, 144, 255)' : 'black'">account_circle</mat-icon>
				</button>
			</div>
			<div class="header-button">
				<div class="alarm-layout" style="min-width: 40px;">
					<button mat-icon-button *ngIf="alarms.show" (click)="onAlarmsShowMode('collapse')">
						<mat-icon aria-label="Alarms">notifications_none</mat-icon>
						<div class="button-counter alarm-color" [style.opacity]="alarms.count?'':'0'">{{alarms.count}}</div>
					</button>
				</div>
				<div class="info-layout" style="min-width: 40px;">
					<button mat-icon-button *ngIf="infos.show" (click)="onAlarmsShowMode('collapse')">
						<mat-icon aria-label="Info">error_outline</mat-icon>
						<div class="button-counter info-color" [style.opacity]="infos.count?'':'0'">{{infos.count}}</div>
					</button>
				</div>
			</div>
		</div>
		<div style="padding-top: 5px;">
			<app-fuxa-view *ngIf="showHomeView" #fuxaview class="home-body" id="home" [view]="homeView" [hmi]="hmi" [gaugesManager]="gaugesManager"></app-fuxa-view>
			<!-- <app-fuxa-view [hidden]="!showHomeView" #fuxaview class="home-body" id="home" [view]="homeView" [hmi]="hmi" [gaugesManager]="gaugesManager"></app-fuxa-view> -->
			<!-- <app-iframe [hidden]="isLoading && !showHomeLink" #iframeview [link]="homeLink" class="home-body"></app-iframe> -->
			<div [style.visibility]="(showHomeView) ? 'hidden' : 'visible' " class="home-body home-info">
				<p>
					{{'msg.home-welcome' | translate}}.
				</p>
			</div>
			<div id="alarms-panel">
				<app-alarm-view #alarmsview [fullview]="false" (showMode)="onAlarmsShowMode($event)"></app-alarm-view>
			</div>
		</div>
	</mat-sidenav-content>

</mat-sidenav-container>